<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>下拉框去重</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <script>
        function distinct() {
            //遍历右边option元素
            var arr = [];
            $('#s2 > option').each(function (i,dom) {
                //i 指遍历出来的每一个元素
                //dom就是this  指这个s2对象
                var val = $(dom).val();
                arr.push(val);
            });
            //遍历左边option元素,与右边元素进行比较,若相同就删除左边元素
            $('#s1 > option').each(function (i,dom) {
                var $option = $(dom);
               var val = $option.val();
               if (jQuery.inArray(val,arr) >= 0){
                   $option.remove();
               }
            });
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <select id="s1" style="width:100px;" size="10"
                    multiple="multiple" >
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
            </select>
        </td>
        <td align="center">
            <input type="button" value="去除重复" onclick="distinct();"/>
            <br/>
        </td>
        <td>
            <select id="s2" style="width:100px;" size="10"
                    multiple="multiple" >
                <option value="1">选项1</option>
                <option value="3">选项3</option>
                <option value="5">选项5</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>